<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { graphic } from "echarts";
import * as API from "@/api";
export default {
  data() {
    return {
      options: {},
      timer: null,
      autoTime:60 * 60 * 1000,
    };
  },
  props: {},
  mounted() {
    this.getData();
    this.switper();
  },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData() {
      this.pageflag = true;
      API.GET('/super/screen/replace_chart').then(res => {
        console.log('换电数据', res)
        if(res.code === 1 && res.data.length){
          this.init(res.data)
        } 
      })
    },
    init(newData) {
      const month = newData.map(item => item.month)
      const dataNum = newData.map(item => item.num)
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            return params[0].marker + params[0].seriesName + " : " + params[0].value + '次'
          },
        },
        // legend: {
        //   data: ["已安装", "计划安装", "安装率"],
        //   textStyle: {
        //     color: "#B4B4B4",
        //   },
        //   top: "0",
        // },
        grid: {
          left: "60px",
          right: "40px",
          bottom: "30px",
          top: "20px",
        },
        xAxis: {
          // data: newData.category,
          data: month,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },

            axisLabel: {
              formatter: function(p){
                return p / 10000 + '万'
              },
            },
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}% ",
            },
          },
        ],
        series: [
          {
            name: "换电次数",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#956FD4" },
                { offset: 1, color: "#3EACE5" },
              ]),
            },
            data: dataNum,
          },
          {
            name: "安装率",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 4,
            // yAxisIndex: 1,
            itemStyle: {
              color: "#F02FC2",
            },
            data: dataNum,
          },
        ],
      };
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.autoTime);
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
